<!-- Content SearchBar -->
<template>
  <v-form ref="searchField">
  <v-row>
    <v-col cols="12" sm="3">
      <v-btn-toggle dense borderless color="secondary" tile v-model="searchField.status" mandatory>
          <v-btn>全部<span>({{(count.published || 0 + count.draft || 0)}})</span></v-btn>
          <v-btn value="published">已发布<span>({{count.published || 0}})</span></v-btn>
          <v-btn value="draft">草稿<span>({{count.draft || 0}})</span><span></span></v-btn>
        </v-btn-toggle>
    </v-col>
    <v-col cols="12" sm="6">
      <v-text-field
        dense
        label="请输入标题搜索内容！"
        hide-details
        prepend-inner-icon="search"
        color="secondary"
        clearable
        solo-inverted
        flat
        v-model="searchField.title"
        :append-outer-icon="moreSearchField ? 'keyboard_arrow_up':'keyboard_arrow_down'"
        @click:append-outer="moreSearchField = !moreSearchField"/>
    </v-col>
    <v-col cols="12" sm="3">
        <!-- <v-btn @click="moreSearchField = !moreSearchField" icon><v-icon>{{moreSearchField ? 'keyboard_arrow_up' :'keyboard_arrow_down'}}</v-icon></v-btn> -->
        <v-btn color="primary" @click="searchBtn"><v-icon>search</v-icon>搜索</v-btn>
        <v-btn text @click="resetBtn"><v-icon>refresh</v-icon>重置</v-btn>
    </v-col>
    <v-col cols="12" v-show="moreSearchField">
      <!-- <v-form> -->
        <!-- <v-container> -->
          <v-row>
            <v-col>
              <v-text-field
                type="number"
                label="ID"
                v-model="searchField.id"></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                label="作者"
                v-model="searchField.author"></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                label="来源"
                v-model="searchField.source"></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                label="标签"
                v-model="searchField.tags"></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                label="地区"
                v-model="searchField.area"></v-text-field>
            </v-col>
          </v-row>
        <!-- </v-container> -->
      <!-- </v-form> -->
    </v-col>
  </v-row>
  </v-form>
</template>
<script>
// import { fetchStatusCount } from '@/api/admin/content.js'
export default {
  name: 'ContentSearch',
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    count: {
      type: Object,
      default: () => { return {} }
    }
  },
  data: function () {
    return {
      searchField: this.value,
      moreSearchField: false
    }
  },
  watch: {
    'searchField.status': function(newVal, oldVal) {
      this.$emit('refreshdata')
    }
  },
  mounted: function() {
    // this.fetchCount()
  },
  methods: {
    searchBtn: function() {
      this.$emit('refreshdata')
    },
    resetBtn: function() {
      this.$refs.searchField.reset()
      this.searchField.status = null
      this.$emit('refreshdata')
    }
  }
}
</script>
<style scoped>
</style>
